<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true" >
                <el-form-item label="用户名">
                    <el-input class="filter-item" clearable v-model="search.username" placeholder="请输入用户名" style="width: 200px;" @keyup.enter.native="pageNo = 1;handleSearch()"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input class="filter-item" clearable v-model="search.name" placeholder="请输入姓名" style="width: 200px;" @keyup.enter.native="pageNo = 1;handleSearch()"></el-input>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input class="filter-item" clearable v-model="search.mobile" placeholder="请输入手机" style="width: 200px;" @keyup.enter.native="pageNo = 1;handleSearch()"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select clearable v-model="search.role" placeholder="请选择角色（可多选）" multiple="multiple" class="filter-item" style="'width: 220px;" :collapse-tags="true">
                    <el-option
                        v-for="item in roles"
                        :label="item.name"
                        :key="item.id"
                        :value="item.id"
                        v-if="
                            $data.userInfo.role.includes(item.id)
                            ||
                            $data.userInfo.created_role_ids.includes(item.id)
                            ||
                            $data.userInfo.role.includes(1)"
                    ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" icon="el-icon-plus" type="primary" @click="create" plain>添加用户</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="multipleTable"
            stripe
            border
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            class="text-center"
            @checkbox-all="handleSelectionChange"
            @checkbox-change="handleSelectionChange">
            <vxe-table-column type="checkbox" width="40"/>
            <vxe-table-column title="ID" field="id" width="50"/>
            <vxe-table-column title="用户名" field="username" width="100px"/>
            <vxe-table-column title="姓名" field="name" width="100px"/>
<!--            <vxe-table-column title="Email" field="email"/>-->
            <vxe-table-column title="手机" field="mobile" width="120px"/>
            <vxe-table-column title="用户组" field="role">
                <template slot-scope="scope">
                    <el-tag v-for="role in scope.row.roles" :key="role.id">{{ role.name }}</el-tag>
                </template>
            </vxe-table-column>
            <vxe-table-column title="最后登录IP" field="lastip" width="180px">
                <template slot-scope="scope">
                    {{ scope.row.lastip || '-' }}
                </template>
            </vxe-table-column>
            <vxe-table-column title="最后登录时间" field="lasttime" width="150px">
                <template slot-scope="scope">
                    {{ scope.row.lasttime || '-' }}
                </template>
            </vxe-table-column>
            <vxe-table-column title="创建者" field="creator.name" :formatter="formatCreatorName" width="90px"/>
            <vxe-table-column title="创建时间" field="created_at" width="150px"/>
            <vxe-table-column title="状态" field="is_forbidden" width="90px">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.is_forbidden ? 'danger' : 'success'">{{ scope.row.is_forbidden ? '禁用' : '正常' }}</el-tag>
                </template>
            </vxe-table-column>
            <vxe-table-column title="操 作" width="300px">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        @click="OneClickLogin(scope.row)">
                        授权登录
                    </el-button>
                    <el-button
                        type="primary"
                        @click="edit(scope.row)">
                        编辑
                    </el-button>
                    <destroy-confirm
                        route="manager/Destroy"
                        :primary="scope.row.id"
                        @success="handleSearch">
                    </destroy-confirm>
                </template>
            </vxe-table-column>
        </vxe-table>

        <div class="mt-10 pull-left">
            <destroy-multiple
                route="manager/DestroyMultiple"
                :selected="selected"
                @success="handleSearch">
                <el-button type="danger"  plain>删除选中</el-button>
            </destroy-multiple>
        </div>

        <el-pagination
            class="pull-right"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

        <el-dialog
            :title="form.data && form.data.id ? '编辑' : '添加'"
            :visible.sync="form.show"
            width="80%"
            :append-to-body="true"
            :close-on-click-modal="false"
            center>
            <dialog-form
                :data="form.data"
                v-on:submit="onFormSubmit"
                v-on:cancel="form.show = false">
            </dialog-form>
        </el-dialog>
    </div>
</template>

<script>
    import dialogForm from './form'
    import router from "~/router";

    export default {
        components: {
            dialogForm,
        },
        data() {
            return {
                search: {
                    username: '',
                    mobile: '',
                    name: '',
                    role: []
                },
                loading: false,
                selected: [],
                tableData: [],
                pageNo: 1,
                pageSize: 20,
                totalDataNumber: 0,
                pageOptions: this.$store.state.backend.pageOptions,
                form: {
                    data: {},
                    show: false,
                },
                userInfo: this.$store.state.manager.info
            }
        },
        computed: {
            roles () {
                return this.$store.state.role.all;
            }
        },
        methods: {
            formatCreatorName({ row }) {
                if (row.creator && row.creator.name) {
                    return row.creator.name;
                } else {
                    return "系统管理员";
                }
            },
            handleSizeChange(val) {
                this.pageNo = 1;
                this.pageSize = parseInt(`${val}`);
                this.handleSearch();
            },
            handleCurrentChange(val) {
                this.pageNo = parseInt(`${val}`);
                this.handleSearch();
            },
            handleSelectionChange(val) {
                this.selected = val.records.map(v => v.id);
            },
            handleSearch() {
                this.loading = true;
                let filter = Object.assign({}, this.search, {
                    page: this.pageNo,
                    pageSize: this.pageSize,
                });
                this.$store.dispatch('manager/Lists', filter).then(res => {
                    this.tableData = res.data.data;
                    this.totalDataNumber = res.data.meta.total;
                }).finally(() => {
                    this.loading = false;
                });
            },
            initData() {
                this.handleSearch();
            },
            create() {
                this.form.data = {};
                this.form.show = true;
                this.getRoles()
            },
            edit(row) {
                this.form.data = row;
                this.form.show = true;
            },
            onFormSubmit() {
                this.form.show = false;
                this.handleSearch();
            },
            getRoles() {
                this.$store.dispatch('role/All', 'role');
            },
            OneClickLogin(row) {
                this.$helper.setCache('one_click_token', '');
                window.open('/admin#/manager/one-click-login?user_id=' + row.id, '_blank');
            }
        },
        created() {
            this.initData();
            this.getRoles();
        }
    }
</script>

<style scoped>

</style>

